<template>
  <div>
    <div id="myChart" :style="{width: '95%', height: '600px'}"></div>
  </div>  
</template>

<script>
import axios from 'axios';
export default {
  async mounted(){
    // await this.getData()
    this.drawChart()
  },
  data(){
    return {
      nodes:[],
      links:[]
    }
  },
  methods:{
    async getData(){
      var url="http://localhost:8601/stock/trace";
      var body={
        "begin": "2022-05-17 00:00:00",
        "byIn": true,
        "end": "2022-05-20 23:00:00",
        "goodsid": 623,
        "orgid": 1151,
        "warehouseid": 0
      }
      var auth="zskyDUB+OpdEpJtbuHe8Dg=="
      var rep=await axios.post(url,body,{headers:{Authorization:auth}})
      var r=rep.data.result
      for(var i in r.nodes){
        var n=r.nodes[i]
        this.nodes.push({name:n.name,depth:n.lev})
      }
      for (var i in r.links){
        var l=r.links[i]
        this.links.push({source: l.fromName,target: l.toName,value: l.cnt,goods:l.goodsName,cnt:l.cnt,price:l.price})
      }

    },
    drawChart1(){
      var chartDom = document.getElementById('myChart');
      var myChart = this.$echarts.init(chartDom);
      var opt={
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series:[
          {
            type: 'sankey',
            data: this.nodes,
            nodeAlign: 'justify',
            links: this.links,
            emphasis: {
              focus: 'adjacency'
            },
            tooltip:{
              formatter:function(p){                
                if(p.dataType=='node'){
                  return "<div>"+p.name+":"+p.value+"</div>"
                }
                else if(p.dataType=='edge'){
                  return "<div>"+p.name+"<br/>数量:"+p.data.cnt+"<br />价格:"+p.data.price+"</div>"
                }                
              }
            }
          }
        ]
      }

      myChart.setOption(opt)

    },
    drawChart(){
      var chartDom = document.getElementById('myChart');
      var myChart = this.$echarts.init(chartDom);

      var links=[
        {source: '中央库房',target: 'A库房',value: 2},
        {source: '中央库房',target: 'A库房',value: -1},
        {source: '中央库房',target: 'B库房',value: 2},
        {source: 'A库房',target: 'B库房',value: 1},
        // {source: '在途',target: 'C库房',value: 2},

        // {source: '在途',target: 'B库房',value: -2},
        // {source: '在途',target: 'C库房',value: 2},
        
        // {source: '盘点',target: '中央库房盘点',value: 3},
        // {source: '中央库房盘点',target: '中央库房',value: 3},
        // {source: '采购',target: '中央库房采购',value: 4},
        // {source: '中央库房采购',target: '中央库房',value: 4},
        // {source: '盘点',target: '襄垣库房盘点',value: 3},
        // {source: '襄垣库房盘点',target: '襄垣库房',value: 3},
        // {source: '中央库房',target: '襄垣库房',value: 1},
        // {source: '襄垣库房',target: '襄垣销售',value: 2},
        // {source: '襄垣销售',target: '销售',value: 2},
        // {source: '中央库房',target: '万柏林',value: 2},
        // {source: '万柏林',target: '万柏林销售',value: 1},
        // {source: '万柏林销售',target: '销售',value: 1},
        // {source: '万柏林',target: '万柏林盘点出库',value: 1},
        // {source: '万柏林盘点出库',target: '盘点出库',value: 1},
      ]

      var names=[]
      for(var i in links){
        var has=false
        for (var ii in names){
          if(names[ii].name==links[i].source){has=true;break}
        }
        if(!has){
          names.push({name:links[i].source,allcnt:1,allprice:200})
        }
        has=false
        for (var ii in names){
          if(names[ii].name==links[i].target){has=true;break}
        }
        if(!has){
          names.push({name:links[i].target})
        }
      }
      for(var i in names){
        var item=names[i]
        if(item.name=="中央库房"){ item.depth=2 }
        else if(item.name=='盘点' || item.name=='采购'){item.depth=0}
        else if(item.name=='销售' || item.name=='盘点出库'){item.depth=5}
        else if(item.name.endsWith('库房')){ item.depth=3}
        else if (item.name.endsWith('采购') || item.name.endsWith('盘点') ){item.depth=1}
        else if(item.name.endsWith('销售') || item.name.endsWith('盘点出库')) {item.depth=4}
      }

      var opt={
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series:[
          {
            type: 'sankey',
            data: names,
            nodeAlign: 'justify',
            links: links,
            emphasis: {
              focus: 'adjacency'
            },
            tooltip:{
              formatter:function(p){                
                if(p.dataType=='node'){
                  console.log(p)
                  return "<div>"+p.name+":"+p.value+"<br /> 数量 入:123 出:100 <br/ > 金额 入:1000 出:800</div>"
                }
                else if(p.dataType=='edge'){
                  return "<div>"+p.name+":"+p.value+"<br/>数量:"+p.data.cnt+"<br />价格:"+p.data.price+"</div>"
                }                
              }
            }
          }
        ]
      }

      myChart.setOption(opt)

    }
  }
}
</script>

<style>

</style>
